<template>
  <div>
    <van-sticky>
      <!-- 标题栏 -->
      <van-nav-bar title="百慕大影城">
        <template #right>
          <van-popover placement="bottom-end" v-model:show="showPopover" :actions="actions">
            <template #reference>
              <van-icon name="apps-o" size="24" />
            </template>
          </van-popover>
        </template>
      </van-nav-bar>

      <!-- 广告栏  AppHeader -->
      <app-header style="background-color:#fff;"></app-header>

      <!-- 导航栏 -->
      <div class="nav" style="background-color:#fff;">
        <div>北京</div>
        <span class="arrow"></span>
        <!-- tabs -->
        <van-tabs color="#f03d37" class="tabs" v-model:active="active" @change="changeNav">
          <van-tab title="热映" :name="1"></van-tab>
          <van-tab title="待映" :name="2"></van-tab>
          <van-tab title="经典" :name="3"></van-tab>
        </van-tabs>
        <van-icon class="icon" color="#f03d37" size="24" name="search"></van-icon>
      </div>
    </van-sticky>
    <!-- 电影列表 -->

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
      <van-list v-if="movieList && movieList.length > 0" v-model:loading="loading" :finished="finished"
        finished-text="我是有底线的!" @load="onLoad">

        <movie-item v-for="item in movieList" :key="item.id" :movieInfo="item"
          @click="$router.push('/movie-detail/' + item.id)" />

      </van-list>
    </van-pull-refresh>

    <div style="height: 60px"></div>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import httpApi from '../../http/index'
import Movie from '../../types/Movie'
import { storage } from '../../utils/storage'

// 处理下拉刷新业务 -----------------------------------------------
const refreshing = ref(false)
function onRefresh() {
  console.log('触发了下拉刷新操作...')
  // 加载当前类别下的第一页数据，重新更新当前电影列表
  let params = { cid: active.value, page: 1, pagesize: 20 }
  httpApi.movieApi.queryByCategory(params).then(res => {
    // 更新列表
    movieList.value = res.data.data.result
    // 停止下拉刷新中的状态提示
    refreshing.value = false
    // 需要将最新的数据，存入缓存 
    storage.set(active.value + "", res.data.data.result)
  })
}



// 处理触底加载业务 -----------------------------------------------
const loading = ref(false)  // 是否正在触底加载中
const finished = ref(false) // 是否已经触底加载完毕

// 将会在触底时执行，vant将会自动设置loading=true
function onLoad() {
  console.log('到底了！！')
  // 整理请求参数，发送请求，加载当前类别的下一页数据
  let cid = active.value
  // 此处需要计算下一页的页码，根据当前movieList的长度  
  // movieList.length      下一页页码
  // 20                    2
  // 40                    3
  // 60                    4
  // 100                   6
  // 105                   7
  // n                     ?   Math.ceil((n/20)+1)

  let page = Math.ceil((movieList.value.length / 20) + 1)
  let params = { cid, page, pagesize: 20 }
  httpApi.movieApi.queryByCategory(params).then(res => {
    // 得到结果后，将结果数组追加到原数组的末尾
    movieList.value.push(...res.data.data.result)
    // 加载完毕后，修改loading
    loading.value = false
    // 判断是否到底了，如果到底了，则执行finished=true
    if (movieList.value.length >= res.data.data.total) {
      finished.value = true
    }
  })
}



// 切换顶部导航时的相关业务-----------------------------------------
const active = ref(1)  // 默认选中热映类别
function changeNav(value: number) {
  // 重置finished变量值为false 
  finished.value = false
  // 让浏览器滚动到顶部
  window.scrollTo(0, 0)
  console.log(value) // value就是当前选中的name值 cid

  // 先去缓存中找一找，当前类别下有没有缓存的首页电影数据，有就直接用
  let movies = storage.get(value + "") as Movie[]
  if (movies) {
    movieList.value = movies // 直接更新列表
    return;
  }

  // 发请求，访问当前类别下的首页电影列表
  let params = { cid: value, page: 1, pagesize: 20 }
  httpApi.movieApi.queryByCategory(params).then(res => {
    console.log('切换顶部导航', res)
    movieList.value = res.data.data.result
    // 将当前类别的首页 存入Storage缓存
    storage.set(value + "", res.data.data.result)
  })
}


// 加载首页热映列表数据 --------------------------------------------
const movieList = ref<Movie[]>([])
onMounted(() => {
  console.log('onMounted...')
  // 发送http请求，加载首页热映列表数据
  let params = { cid: 1, page: 1, pagesize: 20 }
  httpApi.movieApi.queryByCategory(params).then(res => {
    console.log("加载首页热映列表", res)
    // 发送成功，在页面中展示出电影列表  TODO  保存数据
    movieList.value = res.data.data.result
  })
})


// 通过 popover弹窗相关 -------------------------------------------
const showPopover = ref(false);
const actions = [
  { text: '首页' },
  { text: '榜单' },
  { text: '热点' },
  { text: '商城' },
];
</script>


<style lang="scss" scoped>
.nav {
  display: flex;
  align-items: center;
  padding: 0px 20px;
  border-bottom: 1px solid #eee;

  .arrow {
    border: 5px solid transparent;
    border-top-color: #333;
    margin: 8px 0px 0px 3px;
  }

  .tabs {
    flex: 1;
    margin: 0px 25px;
  }

  .icon {
    font-weight: bold;
  }

}
</style>